<template>
  <div class="videopage">
    <div class="bgc">
      <van-icon name="arrow-left" @click="fan" />
      <div>
        <van-icon name="wap-nav" />
        <van-cell title="1" @click="showShare = true" class="show" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
        />
      </div>
    </div>
    <div class="shi">
      <video
        :src="sir"
        autoplay="autoplay "
        loop
        controls
        width="100%"
        height="100%"
      ></video>
    </div>
    <div class="ding">
      <div class="tou">
        <img :src="video.avatarUrl" alt="" class="touxiang" />
        <span class="wenzi">{{ video.title }}</span>
      </div>
      <p class="www">{{ video.description }}</p>
    </div>
    <ul class="zan">
      <li>
        <p>
          <van-icon name="like-o" v-if="!falg" @click="like" /><van-icon
            name="like"
            v-if="falg"
            @click="like"
            class="hong"
          />
        </p>
        {{ video.praisedCount }}
      </li>
      <li>
        <p><van-icon name="more-o" /></p>
        {{ video.commentCount }}
      </li>
      <li>
        <p><van-icon name="share-o" /></p>
        {{ video.shareCount }}
      </li>
    </ul>
  </div>
</template>

<script>
import { videoXiangAPI, videoDhiAPI } from "../../api/yuncun";
export default {
  data() {
    return {
      video: {},
      sir: "",
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      falg: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //视频详情
    async ShiPin(id) {
      const resultsa = await videoXiangAPI(id);
      // console.log(resultsa);
      this.video = resultsa.data.data;
    },
    //获取播放地址
    async dizhi(id) {
      const results = await videoDhiAPI(id);
      // console.log(results);
      this.sir = results.data.urls[0].url;
    },
    //头部返回
    fan() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    //点击红心
    like() {
      this.falg = !this.falg;
      if (this.falg) {
        this.video.praisedCount += 1;
      } else {
        this.video.praisedCount -= 1;
      }
    },
  },
  created() {
    let id = this.$route.params.id;
    this.ShiPin(id);
    this.dizhi(id);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.hong {
  color: red;
}
.videopage {
  background-color: black;
  color: #fff;
  /* border: 1px solid transparent; */
  width: 100%;
  height: 100%;
  position: absolute;
}
.touxiang {
  width: 50px;
  height: 50px;
  margin-left: 20px;
  border-radius: 50%;
  vertical-align: text-top;
}
.tou {
  position: relative;
}
.shi video {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.wenzi {
  position: absolute;
  top: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 60%;
  margin-left: 10px;
}
.bgc {
  display: flex;
  padding: 10px 20px;
  justify-content: space-between;
  background-color: black;
  color: #fff;
  position: relative;
  z-index: 999999;
}
.show {
  position: absolute;
  top: 26px;
  right: 19px;
  width: 30px;
  opacity: 0;
}
.zan {
  position: absolute;
  bottom: 20%;
  right: 0px;
  width: 70px;
  z-index: 222;
}
.zan li {
  color: #fff;
  text-align: center;
  list-style: none;
  margin-top: 20px;
  width: 70px;
  height: 70px;
}
.van-icon {
  font-size: 25px;
}
.www {
  text-align: justify;
  padding: 5px 60px 0px 20px;
  line-height: 22px;
  overflow: hidden; /* //超出的文本隐藏 */
  text-overflow: ellipsis; /* //溢出用省略号显示 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* // 超出多少行 */
  -webkit-box-orient: vertical;
}
.ding {
  position: absolute;
  bottom: 10%;
  left: 0;
}
</style>
